import { Button, Card, Form, Input, Select, Space, Table,Image } from 'antd'
import React, { useEffect, useState } from 'react'
import { ColumnsType} from 'antd/lib/table'
import { changeStatus, getDistrictList, getHospitalList } from '@/api/hospital/hospitalList'
import { IDistrictList, IHospitalList, IHospitalItem, IFormFields } from '@/api/hospital/model/hospitalListType'
import { useNavigate } from 'react-router-dom'
const {Option}  = Select

export default function HospitalList() {
    const columns: ColumnsType<any> = [
        {
            title: '序号',
            render(value:any,row: any,index:number) {
                return (current - 1) * pageSize + (index + 1)
            }
        },
        {
            title: '医院logo',
            render(row: IHospitalItem) {
                return (
                    <Image width={100} src={'data:image/jpeg;base64,' + row.logoData}/>
                )
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname'
        },
        {
            title: '等级',
            render(row: IHospitalItem) {
                return (row.param.hostypeString)
            }
        },
        {
            title: '详细地址',
            render(row:IHospitalItem) {
                return row.param.fullAddress
            }
        },
        {
            title: '状态',
            render(row:IHospitalItem) {
                return row.status ? '已上线' : '未上线'
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime'
        },
        {
            title: '操作',
            render(row: IHospitalItem) {
                return (
                    <Space>
                        <Button type='primary' onClick={()=> {
                            navigate('/syt/hospital/hospitialList/show/' + row.id)
                        }}>查看</Button>
                        <Button type='primary' onClick={()=>{
                            navigate('/syt/hospital/hospitialList/schedule/' + row.hoscode)
                            }}>排班</Button>
                        <Button onClick={()=>updateStatus(row.id,row.status)} type='primary'>{row.status ? '下线': '上线'}</Button>
                    </Space>
                )
            }
        }

    ]
    const [form] = Form.useForm() // 用来获取表单中输入的数据
    const navigate = useNavigate()
    // 等待效果 
    let [loading,setLoading] = useState<boolean>(false) 
    // 声明省·市·区 列表
    let [provinceList, setProvinceList] = useState<IDistrictList>([])
    let [cityList, setCityList] = useState<IDistrictList>([])
    let [areaList, setAreaList] = useState<IDistrictList>([])
    // 医院等级
    let [degree, setDegree] = useState<IDistrictList>([])
    // 医院列表分页数据
    let [current, setCurrent] = useState<number>(1)
    let [pageSize,setPageSize] = useState<number>(5)
    let [total, setTotal]= useState<number>(10)
    let [hospitalList, setHospitalList] = useState<IHospitalList>([])

    // 重新给数据赋值
    let [formFields, setFormFields] = useState<IFormFields>({
        hoscode:undefined,
        hosname:undefined,
        provinceCode:undefined,
        cityCode:undefined,
        districtCode:undefined,
        status:undefined,
        hostype:undefined

    })
    // 获取省列表数据
    const getProvinceList = async () => {
        let proList = await getDistrictList(86)
        setProvinceList(proList)      
    }
    // 获取市列表数据
    const getCityList = async (id:number) => {
        form.setFieldsValue({
            cityCode: undefined,
            districtCode: undefined
        })
        setCityList([])
        setAreaList([])
        let cityList = await getDistrictList(id)
        setCityList(cityList) 
    }
    // 获取区列表数据
    const getAreaList = async (id:number) => {
        form.setFieldsValue({
            districtCode: undefined
        })
        setAreaList([])
        let areaList = await getDistrictList(id)
        setAreaList(areaList)  
    }
    // 获取医院等级
    const getHospDegree = async() => {
        let degree = await getDistrictList(10000)
        setDegree(degree)
        
    }
    // 获取医院列表数据
    const getHospList = async () => {
        setLoading(true)
        let {content, totalElements} = await getHospitalList({page: current,limit: pageSize,...formFields})
        // console.log(content);
        setTotal(totalElements)
        setHospitalList(content)
        setLoading(false) 
    }
    // 查询数据列表
    const searchList = async () => {
        // console.log(form.getFieldsValue());
        setFormFields(form.getFieldsValue()) // 获取表单数据最新的值，设置到FormFields状态数据中
        setCurrent(1)
    }
    // 清空表单
    const clearInput = () => {
        form.resetFields()
        form.setFieldsValue({
            hosname: undefined,
            hoscode: undefined,
            hostype: undefined,
            provinceCode: undefined,
            cityCode : undefined,
            districtCode: undefined,
            status: undefined
        })
        setFormFields(form.getFieldsValue())
    }
    // 改变医院上线状态
    const updateStatus = async (id:string, status:number) => {
        // console.log(id,status);
        await changeStatus(id,status === 0? 1: 0)
        getHospList()
        
    }
    useEffect(() => {
        getProvinceList()
        getHospDegree() 
    }, [])
    // 当页数切换/ 页面切换时，重发请求(这里分城两个写是由于，当页数/当前页发生变化时，不应该重新请求省市区等的数据)
    useEffect(() => {
        getHospList()
        // 由于useEffect无法做深度监听，所以这里只能将其中的每条数据都进行监听
    }, [current, pageSize,formFields.hoscode,formFields.hosname,
        formFields.cityCode,formFields.provinceCode,formFields
        .districtCode,formFields.hostype,formFields.status])
    
  return (
    <div>
      <Card>
            <Form
                layout='inline'
                form={form}
                className='mar-t mar-b'
            >
                <Form.Item name="provinceCode">
                    <Select placeholder="请选择省"  style={{width:200}} onSelect={(id: any) => {getCityList(id)}}>
                        {provinceList.map(province => (
                            <Option value={province.value} key={province.id}>{province.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name="cityCode">
                    <Select placeholder="请选择市"  style={{width:200}} onSelect={(id:any) => getAreaList(id)}>
                        {cityList.map(city => (
                            <Option value={city.value} key={city.id}>{city.name}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item name="districtCode">
                    <Select placeholder="请选择区"  style={{width:200}}>
                    {areaList.map(area => (
                            <Option value={area.value} key={area.id}>{area.name}</Option>
                        ))}

                    </Select>
                </Form.Item>
                <Form.Item name="hosname">
                    <Input className='bor-r' placeholder='医院名称'></Input>
                </Form.Item>
                <Form.Item name="hoscode">
                    <Input className='bor-r' placeholder='医院编号'></Input>
                </Form.Item>
                <Form.Item className='mar-t' name="hostype">
                    <Select placeholder="医院类型"  style={{width:200}}>
                        {degree.map(item => (
                             <Option value={item.value} key={item.id}>{item.name}</Option>
                        ))}

                    </Select>
                </Form.Item>
                <Form.Item className='mar-t' name="status">
                    <Select placeholder="医院状态"  style={{width:200}}>
                        <Option value={0}>未上线</Option>
                        <Option value={1}>已上线</Option>

                    </Select>
                </Form.Item>
                <Form.Item className='mar-t'>
                    <Space>
                        <Button onClick={() => searchList()} className='bor-r' type='primary'>查询</Button>
                        <Button onClick={() => clearInput()} className='bor-r' disabled={Object.values(formFields).every(item => item === undefined)} >清空</Button>
                    </Space>
                </Form.Item>
            </Form>
            <Table 
                loading= {loading}
                columns={columns}
                rowKey={"id"}
                dataSource={hospitalList}
                pagination = {{
                    current,
                    pageSize,
                    total,
                    onChange(current:number,pageSize:number) {
                        setCurrent(current)
                        setPageSize(pageSize)
                    }
                }}
            />
      </Card>

    </div>
  )
}
